<template>
        <view class="conon">
        	<view class="fextit">
        		<view  :style="{height:getstateheight()+'px'}"></view>
        		<view  class="navgetaber" :style="{height:gettitileheight()+'px'}">
        			<view @click="back" class="iconfont icon-fanhui" style="width:30rpx;"></view>
        			<view class="">{{titlename}}发布</view>
        			<view  style="width:30rpx;"></view>
        		</view>
        	</view>
        	<view  :style="{height:getstateheight() + gettitileheight()+'px'}"></view>
        	
        	<view class="img">
        		<view class="top">轻轻松松 上架房源</view>
        		<view class="bu">实名认证 -> 发布房源 -> 真房认证 -> 平台展示</view>
        		<image src="../../static/img/fbcon-bg.png" mode="aspectFill"></image>
        	</view>
        	<view class="shotitle">房源基础信息</view>
        	<view class="showcon">
        		     <view class="showcon-item" >
        		     	  <view class="showcon-l">发布城市:</view>
        		      	  <view class="showcon-r" @click="showaddresref">
        	  	     		 <view class="con-l">{{!hosedata.address?"请选择":hosedata.address}}</view>
        		     		 <view class="iconfont icon-fanhui"></view>
        		     	  </view>
        		     </view>
        			 <view class="showcon-item">
        			 	  <view class="showcon-l">小区名称/详细地址:</view>
        			  	  <view class="showcon-r-s">
        			 		 <input v-model="hosedata.title" class="con-l" placeholder="详细地址" />
        			 	  </view>
        			 </view>
        			 <view class="showcon-item" >
        			 	  <view class="showcon-l">房屋朝向:</view>
        			  	  <view class="showcon-r" @click="selcetcx">
        			 		 <view class="con-l">{{!hosedata.fx?"请选择":hosedata.fx}}</view>
        			 		 <view class="iconfont icon-fanhui"></view>
        			 	  </view>
        			 </view>
        			 <view class="showcon-item">
        			 	  <view class="showcon-l">房型/几室:</view>
        			  	  <view class="showcon-r-s">
        			 		 <input v-model="hosedata.sum" class="con-l" placeholder="例如:3" />
        			 	  </view>
        			 </view>
        			 <view class="showcon-item">
        			 	<view class="showcon-l">整套面积:</view>
        			 	<view class="showcon-r-area">
        			 		<input v-model="hosedata.erea" type="number" class="con-l" placeholder="面积" />
        			 		<view >平方米 </view>
        			 	</view>
        			 </view>
        	</view>
        	<view class="tagbox">
        		   <view class="itag" v-for="i in tagdata" :key="i" @click="additem(i)" :class="{select:hosedata.tag.includes(i)}">{{i}}</view>
        	</view>
			<view class="shotitle">房源照片</view>
			<view class="elseimg">
				<uni-section title="只选择图片" type="line"  >
							<view class="example-body">
								<uni-file-picker :del-icon="false" @select="selecet" :auto-upload="false"  limit="1" title="最多选择1张图片"></uni-file-picker>
							</view>
				</uni-section>
			</view>
			<view class="shotitle">房源介绍</view>
			<view class="conbox">
				 <textarea  @input="textareacon" value="" placeholder="描述一下房屋把~" placeholder-class="place" />
			</view>
			<view class="shotitle">房屋价值</view>
			<view class="showcon-item">
				  <view class="showcon-l">每天/元:</view>
			 	  <view class="showcon-r-s">
					 <input v-model="hosedata.price" class="con-l" placeholder="订个好价钱把~" type="number" />
				  </view>
			</view>
			<view style="height: 50rpx;"></view>
        </view>
		<view class="buttonsned">
			  <view class="top">
				    <checkbox-group @change="changetk" >
				    	<label>
				    		<checkbox  /><text>我承诺房源真实并同意《个人用户租房服务协议》</text>
				    	</label>
				    </checkbox-group>
			  </view>
			  <view class="bu">
				  <view class="" @click="senddata">发布房屋</view>
			  </view>
		</view>
		<uni-data-picker :localdata="arr"  ref="addressref" placeholder="请选择地址" popup-title="请选择城市"  @change="onchange" :preload="true"></uni-data-picker>
		<uni-data-picker :localdata="cxuer"  ref="fxref" placeholder="请选择朝向" popup-title="请选择朝向"  @change="onchangecx" :preload="true"></uni-data-picker>
</template>

<script setup>
	import {ref} from 'vue'
	import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
	import {sendhosedata} from '@/api/index.js'
	import {arr} from '@/static/addr.js'
	import {onLoad} from '@dcloudio/uni-app'
	const addressref=ref()
	const hosedata=ref({
		   type:0,
		   title:"",
		   erea:"",
		   sum:"",
		   context:"",
		   tag:[],
		   price:"",
		   fx:"",
		   address:"",
		   img:[]
	})
	const titlename=ref()
	const fxref=ref()
	const sumref=ref()
	const isagree=ref()
	const tagdata=["冰箱","洗衣机","热水器","宽带","沙发","可做饭","抽烟机","燃气灶","电磁炉","微波炉","橱柜","餐桌","电视","空调","衣柜","床","卫生间","智能门锁","阳台","暖气","书桌","邻地铁","精装修"]
	const cxuer=[
		{
			text:"东",
			value:"dong"
		},
		{
			text:"南",
			value:"nan"
		},
		{
			text:"西",
			value:"xi"
		},
		{
			text:"北",
			value:"bei"
		}
	]
	const changetk=(e)=>{
		isagree.value=e.detail.value.length
	}
	const selcetcx=()=>{
		fxref.value.show()
	}
	const senddata=async()=>{
		for(let i in hosedata.value){
			if( hosedata.value[i].length == 0){
				return  uni.showToast({
				 	title:"信息填写不足！",
					icon:"none"
				 })
			}
		}
		 if(! isagree.value){
			 uni.showToast({
			 	title:"请同意协议！",
				icon:"none"
			 })
			 return
		 }
		 //////////////////////////////
		 hosedata.value.tag= hosedata.value.tag.join('-')
		 const rudata=await sendhosedata(hosedata.value)
		 console.log(rudata)
		  if(rudata.code==200){
			  uni.showToast({
			  	title:rudata.msg,
				icon:"none"
			  })
			  setTimeout(()=>{
				  uni.navigateBack()
			  },2000)
		  }

	}
	onLoad(a=>{
		titlename.value=a.name
		hosedata.value.type=a.type
	})
	const changeting=()=>{
		sumref.value.show()
	}
	const onchangesum=e=>{
		console.log(e)
	}
	const onchangecx=e=>{
		hosedata.value.fx=e.detail.value.map(e=>e.text).join('')
	}
	const onchange=e=>{
		const data=e.detail.value.map(e=>e.text)
		hosedata.value.address=data.join('')
	}
	const showaddresref=()=>{
		addressref.value.show()
	}
	const selecet=(data)=>{
		hosedata.value.img.push(data.tempFilePaths[0])
	}
	const back=()=>{
		 uni.navigateBack()
	}
	const additem=i=>{
           const index=hosedata.value.tag.findIndex(e=>e==i)
		   if(index !== -1){
			   hosedata.value.tag.splice(index,1)
			   return
		   }
		   hosedata.value.tag.push(i)
		   console.log(hosedata.value)
	}
	const textareacon=(e)=>{
		hosedata.value.context=e.detail.value
	}
</script>

<style lang="scss" scoped>
	.buttonsned{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 190rpx;
		background-color:#fff ;
		border-top: 5rpx solid #eee;
		padding:5rpx 25rpx;
		z-index: 99;
		.top{
			height: 20%;
			font-size: 25rpx;
			color: #7b7b7b;
			display: flex;
			align-items: center;
			checkbox-group{
				height: 100%;
                label{
					height: 100%;
					display: flex;
					align-items: center;
				}
			}
			checkbox{
				transform: scale(.5);
			}
		}
		.bu{
			height: 65%;
			width: 100%;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			>view{
				height: 80%;
				width: 100%;
				border-radius: 20rpx;
				background-color: #f57c00;
				color: #fff;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	:deep(.place){
		font-size: 25rpx;
	}
	 .select{
		 border: 2rpx solid #f57c00 !important;
		 background-color:#fff5e5  !important;
		 color: #f57c00 !important;
	 }
	.conon{
		padding: 25rpx;
	}
	   .fextit{
		   position: fixed;
		   top: 0;
		   left: 0;
		   width: 100%;
		   z-index: 99;
          >view{
			  background-color: #fff;
		  }
		   .navgetaber{
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   padding: 0 20rpx;
		   }
	   }
	   .img{
		  height:250rpx;
		  position: relative;
		  image{
			  position: absolute;
			  top: 0;
			  left: 0;
		  	  height:250rpx;
		  	  width: 100%;
			  border-radius: 20rpx;
		  }
		  .top{
			  position: absolute;
			  left: 5%;
			  top: 26%;
			  z-index:2;
			  font-size: 33rpx;
			  font-weight: 700;
		  }
		  .bu{
			  position: absolute;
			  left: 5%;
			  top: 57%;
			  z-index:2;
			  font-size: 26rpx;
		  }

	   }
        .shotitle{
        			  height: 80rpx;
        			  font-size: 28rpx;
        			  font-weight: 700;
        			  line-height: 80rpx;
        			  padding-left: 25rpx;
					  border-bottom: 1rpx solid #f7f7f7;
					  margin-top: 20rpx;
        }
		.showcon-item{
			height: 120rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;
			.showcon-r-area{
				height: 55%;
				width: 400rpx;
				display: flex;
				font-size: 25rpx;
				align-items: center;
				// padding: 0 10rpx;
				justify-content: space-between;
				.con-l{
					height: 100%;
					width: 300rpx;
					background-color: #f7f7f7;
					border-radius: 15rpx;
					padding-left: 10rpx;
				}
			}
			.showcon-l{
				font-size: 25rpx;
			}
			.showcon-r-s{
				height: 55%;
				width: 400rpx;
				background-color: #f7f7f7;
				border-radius: 15rpx;
				display: flex;
				font-size: 25rpx;
				align-items: center;
				padding: 0 10rpx;
			}
			.showcon-r{
				height: 55%;
				width: 400rpx;
				background-color: #f7f7f7;
				border-radius: 15rpx;
				display: flex;
				font-size: 25rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx;
				.iconfont{
					font-size:23rpx;transform: rotate(180deg);
				}
			}
		}
        .tagbox{
			width: 100%;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			overflow: hidden;	
			padding:25rpx 20rpx;
			gap: 20rpx;
			border-top: 1rpx solid #f7f7f7;
			>view{
				height: 60rpx;
				border-radius:60rpx ;
				background-color: #f7f7f7;
				font-size: 25rpx;display: flex;
				align-items: center;
				justify-content: center;
			}
		}
        .elseimg{
			height: 100%;
			padding: 0 20rpx;
			:deep(.file-title){
				font-size: 25rpx;
			}
		}
		.conbox{
			padding: 0 20rpx;
			margin-top: 20rpx;
			textarea{
				width: 100%;
				height: 300rpx;
				background-color: #f7f7f7;
				padding: 10rpx;
				border-radius: 20rpx;
				font-size: 25rpx;
			}
		}
</style>
